/* eslint-disable react-hooks/exhaustive-deps */
import Link from "next/link"
import { Info, Menu, Phone, Video } from "lucide-react"

import { buttonVariants } from "@/components/ui/button"

import { cn } from "@/lib/utils"

export const TopbarIcons = [{ icon: Phone }, { icon: Video }, { icon: Info }]

const ChatTopbar = () => {
    return (
        <div className="w-full h-12 flex p-4 justify-between items-center border-b">
            <div className="flex items-center gap-2">
                <Menu className="text-muted-foreground" />
            </div>
            <div>
                {TopbarIcons.map((icon, index) => (
                    <Link
                        key={index}
                        href='#'
                        className={cn(
                            buttonVariants({ variant: 'ghost', size: 'icon' }),
                            'h-9 w-9',
                        )}
                    ><icon.icon size={20} className="text-muted-foreground" /></Link>
                ))}
            </div>
        </div>
    )
}

export default ChatTopbar